<style lang="scss" scoped>
@mixin type-color {
  &--error {
    background: $progress-error;
  }
  &--warning {
    background: $progress-warning;
  }
  &--primary {
    background: $progress-primary;
  }
}
.xjw-progress {
  display: flex;
  position: relative;
  justify-content: space-between;
  .xjw-progress_back {
    position: absolute;
    top: 32upx;
    left: 0;
    height: 8upx;
    transform: translateY(-50%);
    width: 100%;
    box-sizing: border-box;
    &--outside {
      @include type-color;
    }
    &--inside {
      &--never {
        background: $progress-never;
      }
    }
  }
  .xjw-progress_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    height: 100upx;
    position: relative;
    .xjw-progress_circular {
      width: 64upx;
      height: 64upx;
      border-radius: 50%;
      padding: 8upx;

      box-sizing: border-box;

      &--outside {
        @include type-color;
      }
      &--inside {
        &--error {
          background: $thin-error;
        }
        &--warning {
          background: $thin-warning; //$warning;
        }
        &--success {
          background: $thin-primary;
        }
        &--never {
          background: $progress-never;
        }
      }
      .xjw-progress_icon {
        background: #fff;
        height: 100%;
        box-sizing: border-box;
        border-radius: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        $ontSize: 32upx;
        &--outside {
          &--error {
            color: $progress-error;
            font-size: $ontSize;
            // &::before {
            //   padding-top: 16rpx;
            // }
          }
          &--warning {
            color: $warning;
            font-size: $ontSize;
            // &::before {
            //   padding-top: 16rpx;
            // }
          }
          &--success {
            color: $primary;
            font-size: $ontSize;
            // &::before {
            //   padding-top: 16rpx;
            // }
          }
          &--never {
            color: #d8d8d8;
            font-size: 24upx;
            &::before {
              transform: scale(0.3);
            }
          }
        }
        &--inside {
          &--error {
            background: $progress-error;
            box-shadow: $thin-error-shadow;
            font-size: $ontSize;
            color: #fff;
            // &::before {
            //   padding-top: 16rpx;
            // }
          }
          &--warning {
            background: $warning;
            font-size: $ontSize;
            box-shadow: $thin-warning-shadow;
            color: #fff;
            // &::before {
            //   padding-top: 16rpx;
            // }
          }
          &--success {
            background: $primary;
            font-size: $ontSize;
            box-shadow: $thin-primary-shadow;
            color: #fff;
            // &::before {
            //   padding-top: 16rpx;
            // }
          }
          &--never {
            color: #fff;
            background: #d8d8d8;
            font-size: 24upx;
            box-shadow: $thin-never-shadow;
            &::before {
              transform: scale(0.3);
            }
          }
        }
      }
    }
    .xjw-progress_title {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 96upx;
      text-align: center;
      transform: translateX(-50%);
      font-size: 24upx;

      line-height: 1;
      &--inside {
        &--error {
          color: $error;
        }
        &--warning {
          color: $warning;
        }
        &--success {
          color: $primary;
        }
        &--never {
          color: $never;
        }
      }
      &--outside {
        &--error {
          color: #fff;
        }
        &--warning {
          color: #fff;
        }
        &--success {
          color: #fff;
        }
        &--never {
          color: #fff;
        }
      }
    }
  }
}
</style>
<template>
  <view class="xjw-progress">
    <view
      class="xjw-progress_back"
      :class="'xjw-progress_back--' + type + '--' + globalType"
      v-if="progressItemList.length > 0"
    ></view>
    <view
      class="xjw-progress_item"
      v-for="(item, index) in progressItemList"
      :key="index"
    >
      <view
        class="xjw-progress_circular"
        :class="
          type === 'outside'
            ? 'xjw-progress_circular--' + type + '--' + globalType
            : 'xjw-progress_circular--' + type + '--' + item.type
        "
      >
        <view
          class="xjw-progress_icon iconfont"
          :class="[
            'xjw-' + item.type,
            'xjw-progress_icon--' + type + '--' + item.type
          ]"
        >
        </view>
      </view>
      <view
        class="xjw-progress_title"
        :class="'xjw-progress_title--' + type + '--' + item.type"
        >{{ item.title }}
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";

import { Component, Prop } from "vue-property-decorator";
import { Ttype } from "../types/type";

type TProgressItemColorType = "error" | "warning" | "success" | "never";

export interface IProgressItem {
  type: TProgressItemColorType;
  title: string;
}
type TBackColorEffect = "outside" | "inside";
type progressBack = Ttype | "never";

@Component
export default class Index extends Vue {
  /**
   * @example: 数据
   */
  @Prop({ type: Array as PropType<Array<IProgressItem>>, default: [] })
  progressItemList!: Array<IProgressItem>;

  /**
   * @example: 进度条背景色和xjw-progress_circular背景色
   */
  @Prop({ type: String as PropType<progressBack>, default: "primary" })
  globalType;
  @Prop({ type: String as PropType<TBackColorEffect>, default: "outside" })
  type;
}
</script>
